<template>
  <div class="home-wrapper">
    <div class="top-bar" style="padding: .5rem;background-color: var(--system-primary-color);">
      <Search style="margin-bottom: 0;"/>
    </div>
    <div class="home-scroll">
      <Banner/>
    <div class="home-cont">
        <BookMark />
        <MemoMark/>
    </div>
    </div>
  </div>
</template>
<script setup name="Home">
import { inject } from 'vue';
import Banner from './Banner.vue';
import BookMark from './BookMark.vue';
import MemoMark from './MemoMark.vue';
</script>
<style scoped lang="less">
.home-wrapper{
    width: 100%;
    height: 100%;
    .top-bar{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      width:calc(100% - 1rem);
    }
    .home-scroll{
      padding-top: 3rem;
      width: 100%;
      // height: calc(100% - 3rem);
      // overflow-y: auto;
      .home-cont{
        width: 100%;
        
    }
    }
  
}
</style>

